<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <style>
           .switch{
            width: 57px;
            height: 28px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #fdfdfd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 20px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
            }
            .switch:before {
                content: '';
                width: 26px;
                height: 26px;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 20px;
                background-color: #fff;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            }
            .switch:checked {
                border-color: blue;
                box-shadow: blue 0 0 0 16px inset;
                background-color: blue;
            }
            .switch:checked:before {
                left: 30px;
            }
            .switch.switch-anim {
                transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
            }
            .switch.switch-anim:before {
                transition: left 0.3s;
            }
            .switch.switch-anim:checked {
                box-shadow: rgb(0, 255, 149) 0 0 0 16px inset;
                background-color: rgb(0, 255, 102);
                transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
            }
            .switch.switch-anim:checked:before {
                transition: left 0.3s;
            }



            .switchBox{
                width: 100px;
                height: 40px;
                overflow: hidden;
                background-color: rgb(255,255,255);
                border: 1px solid #ccc;
                border-radius: 20px;
                cursor: pointer;
                transition: all 0.5s;
            }

            .switchBox.active{
                background-color: rgb(4,140,2);
            }

            .switchIcon{
                float: left;
                width: 36px;
                height: 36px;
                margin-top: 1px;
                margin-left: 2px;
                background-color: #fff;
                border: 1px solid #ccc;
                border-radius: 50%;
                box-shadow: #ccc 0px 1px;
            }

            .switchBox.active .switchIcon{
                margin-left: 60px;
            }
        </style>
    </head>

    <body>

        <input type="checkbox" class="switch switch-anim" name="checkbox" checked>

        <div id="app">
            <!-- <myswitch :checked="checked" @change="switchChange"></myswitch> -->
            <myswitch v-model="checked"></myswitch>
            <div>{{checked}}</div>
        </div>
        
</html>


<script>
    function checkNum(){
            if($('.switch-anim').prop('checked')){
                console.log("选中");
            }else{
                console.log("没选中");
            }
        }

    Vue.component('myswitch', {
        props: ['value'],
        data: function () {
            return {
                //act:false,
            }
        },
        methods:{
           /*  clickChange(){
                this.act=!this.act
                this.$emit('input',this.act)
            } */
            clickChange(){
                this.$emit('input',!this.value)
            }
        },
        created(){
            //this.act=this.checked
        },
        template: `<div @click="clickChange" :class="{switchBox:true , active:value}" ><div  class="switchIcon"></div></div>`
    })


        var app = new Vue({
            el: '#app',
            data:{
                checked:false,
            },
            mounted(){
               
            },
            created(){

            },
            methods:{
                submit(){

                },
                switchChange(check){
                    this.checked=check
                    console.log(this.checked)
                }
            }
        })
</script>